/**
 * @file variables.scss
 * @description 全局共享的 SCSS 变量、函数和混合。
 *              遵循 BEM 命名规范和 ITCSS 架构思想。
 *              定义了颜色、字体、间距、断点等基础设计元素。
 */

// ---------------------------------
// 1. 核心设计变量 (Core Design Tokens)
// ---------------------------------
:root {
  // --- 颜色 (Colors) ---
  // 基础色板
  --primary-color: #1890ff;
  --primary-color-light: #e6f7ff;
  --primary-color-dark: #096dd9;
  --primary-color-rgb: 24, 144, 255;
  --secondary-color: #52c41a;
  --secondary-color-rgb: 82, 196, 26;
  --success-color: #52c41a;
  --success-color-light: #f6ffed;
  --success-color-dark: #389e0d;
  --success-color-rgb: 82, 196, 26;
  --warning-color: #faad14;
  --warning-color-dark: #d48806;
  --warning-color-rgb: 250, 173, 20;
  --danger-color: #f5222d;
  --danger-color-light: #fff1f0;
  --danger-color-dark: #cf1322;
  --danger-color-rgb: 245, 34, 45;
  --info-color: #1890ff;
  --info-color-dark: #096dd9;
  --info-color-rgb: 24, 144, 255;
  --gradient-start-color: #6a11cb;
  --gradient-end-color: #2575fc;
  --gradient-hover-start-color: #fcb045;
  --gradient-hover-end-color: #fd1d1d;

  // 组件库专用颜色别名
  --axiom-primary-color: var(--primary-color);
  --axiom-secondary-color: var(--secondary-color);
  --axiom-success-color: var(--success-color);
  --axiom-warning-color: var(--warning-color);
  --axiom-danger-color: var(--danger-color);
  --axiom-error-color: var(--error-color);
  --axiom-info-color: var(--info-color);

  // 文本颜色
  --text-color: #262626;
  --text-color-primary: #262626;
  --text-color-secondary: #595959;
  --text-color-light: #8c8c8c;
  --text-color-placeholder: #bfbfbf;
  --text-color-disabled: #bfbfbf;
  --text-color-inverse: #ffffff;
  --text-color-on-primary: #ffffff;

  // 组件库专用文本颜色别名
  --axiom-text-color: var(--text-color);
  --axiom-text-color-primary: var(--text-color-primary);
  --axiom-text-color-secondary: var(--text-color-secondary);
  --axiom-text-color-placeholder: var(--text-color-placeholder);
  --axiom-text-color-disabled: var(--text-color-disabled);
  --axiom-text-color-inverse: var(--text-color-inverse);
  
  // 背景颜色
  --bg-color: #ffffff;
  --bg-color-page: #f0f2f5;
  --bg-color-secondary: #fafafa;
  --bg-color-tertiary: #f0f0f0;
  --bg-color-light: #fafafa;
  --bg-color-dark: #e6f7ff;
  --bg-color-disabled: #f5f5f5;
  --bg-color-hover: #f5f5f5;
  --bg-image: none;

  // 组件库专用背景颜色别名
  --axiom-bg-color: var(--bg-color);
  --axiom-bg-color-page: var(--bg-color-page);
  --axiom-bg-color-secondary: var(--bg-color-secondary);
  --axiom-bg-color-light: var(--bg-color-light);
  --axiom-bg-color-dark: var(--bg-color-dark);
  --axiom-bg-color-disabled: var(--bg-color-disabled);
  --disabled-bg-color: var(--bg-color-disabled);
  --disabled-border-color: var(--border-color-light);
  --disabled-text-color: var(--text-color-disabled);

  // --- 布局 (Layout) ---
  --header-height: 60px;
  --mobile-header-height: 50px;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 68px;
  --mobile-sidebar-width: 280px;
  --footer-height: 60px;
  --mobile-footer-height: 50px;
  --content-max-width: 1200px;
  
  // 组件库专用布局别名
  --axiom-header-height: var(--header-height);
  --axiom-sidebar-width: var(--sidebar-width);
  --axiom-sidebar-width-collapsed: var(--sidebar-collapsed-width);

  // --- 间距 (Spacing) ---
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  
  // 组件库专用间距别名
  --axiom-spacing-md: var(--spacing-md);
  --axiom-spacing-lg: var(--spacing-lg);

  // --- 边框与圆角 (Borders & Radius) ---
  --border-color: #d9d9d9;
  --border-color-light: #e8e8e8;
  --divider-color: #f0f0f0;
  --border-radius-base: 6px;
  --border-radius-small: 4px;
  --border-radius-large: 8px;
  --border-radius-circle: 50%;
  
  // 组件库专用边框别名
  --axiom-border-color: var(--border-color);
  --axiom-border-color-light: var(--border-color-light);
  --axiom-border-radius-base: var(--border-radius-base);
  --axiom-border-radius-small: var(--border-radius-small);
  --axiom-border-radius-large: var(--border-radius-large);

  // --- 阴影 (Shadows) ---
  --box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
  --box-shadow-light: 0 1px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.2);
  --box-shadow-primary: 0 2px 8px rgba(var(--primary-color-rgb), 0.3);
  --box-shadow-lifted: 0 4px 12px rgba(0, 0, 0, 0.1);
  --primary-glow: 0 0 12px rgba(var(--primary-color-rgb), 0.3);
  
  // 组件库专用阴影别名
  --axiom-box-shadow-base: var(--box-shadow-base);
  --axiom-box-shadow-light: var(--box-shadow-light);

  // --- 字体 (Typography) ---
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  --font-family-special: 'Orbitron', sans-serif;
  --font-family-heading: 'Poppins', var(--font-family-base);
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-large: 16px;
  --line-height-base: 1.6;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  // 组件库专用字体别名
  --axiom-font-family-base: var(--font-family-base);
  --axiom-font-size-base: var(--font-size-base);
  --axiom-font-size-small: var(--font-size-small);
  --axiom-font-size-large: var(--font-size-large);
  --axiom-line-height-base: var(--line-height-base);

  // --- 动画 (Transitions) ---
  --transition-duration-base: 0.3s;
  --transition-duration-fast: 0.2s;
  --transition-timing-function-base: ease;
  
  // 组件库专用动画别名
  --axiom-transition-duration: var(--transition-duration-base);
  --axiom-transition-base: all var(--axiom-transition-duration) var(--transition-timing-function-base);
  
  // --- 层级 (Z-Index) ---
  --z-index-popup: 1000;
  --z-index-modal: 1050;
  --z-index-notification: 1100;
  --z-index-back-to-top: 999;

  // --- Breakpoints ---
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  // --- Overlays ---
  --overlay-bg-color: rgba(0, 0, 0, 0.5);
  --overlay-backdrop-filter: blur(4px);

  // --- Dialog ---
  --dialog-padding-vertical: 20px;
  --dialog-padding-horizontal: 24px;
  --dialog-title-font-size: 18px;

  // --- 其他 (Misc) ---
  --backdrop-blur: 10px;

  // Axiom Aliases
  --axiom-z-index-modal: var(--z-index-modal);
  --axiom-overlay-bg-color: var(--overlay-bg-color);
  --axiom-overlay-backdrop-filter: var(--overlay-backdrop-filter);
  --axiom-dialog-padding-vertical: var(--dialog-padding-vertical);
  --axiom-dialog-padding-horizontal: var(--dialog-padding-horizontal);
  --axiom-dialog-title-font-size: var(--dialog-title-font-size);

  // Blockquote
  --axiom-blockquote-padding: 1rem;
  --axiom-blockquote-border-color: var(--primary-color);
  
  // Feature Card
  --axiom-feature-card-min-height: 280px;
  --axiom-feature-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 248, 255, 0.6));
  --axiom-feature-card-border: 1px solid rgba(255, 255, 255, 0.2);
  --axiom-feature-card-padding: 0;
  --axiom-feature-card-top-padding: 16px 20px 8px;
  --axiom-feature-card-content-padding: 8px 20px;
  --axiom-feature-card-bottom-padding: 8px 20px 16px;
  --axiom-feature-card-top-min-height: 80px;
  --axiom-feature-card-bottom-min-height: 40px;
  --axiom-feature-card-title-margin-bottom: 8px;
  --axiom-feature-card-description-margin-bottom: 12px;
  --axiom-feature-card-icon-size: 48px;
  --axiom-feature-card-icon-font-size: 20px;
  --axiom-feature-card-icon-bg: linear-gradient(135deg, var(--primary-color), var(--success-color));
  --axiom-feature-card-icon-color: var(--white);
  --axiom-feature-card-icon-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
  --axiom-feature-card-icon-hover-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.4);
  --axiom-feature-card-icon-hover-scale: 1.1;
  --axiom-feature-card-icon-glow-opacity: 0.6;
  --axiom-feature-card-top-bar-height: 4px;
  --axiom-feature-card-top-bar-bg: linear-gradient(90deg, var(--primary-color), var(--success-color));
  --axiom-feature-card-pulse-bg: linear-gradient(90deg, transparent, var(--primary-color), var(--secondary-color), var(--primary-color), transparent);
  --axiom-feature-card-pulse-shadow: 0 0 20px var(--primary-color);
  --axiom-feature-card-hover-translate-y: -4px;
  --axiom-feature-card-hover-shadow: 0 12px 35px rgba(var(--primary-color-rgb), 0.25);
  --axiom-feature-card-hover-border-color: rgba(var(--primary-color-rgb), 0.3);
  --axiom-feature-card-hover-bg: linear-gradient(145deg, rgba(var(--primary-color-rgb), 0.1), rgba(var(--success-color-rgb), 0.05));
  // Responsive
  --axiom-feature-card-mobile-min-height: 240px;
  --axiom-feature-card-mobile-top-padding: 12px 16px 6px;
  --axiom-feature-card-mobile-content-padding: 6px 16px;
  --axiom-feature-card-mobile-bottom-padding: 6px 16px 12px;
  --axiom-feature-card-mobile-top-min-height: 60px;
  --axiom-feature-card-mobile-bottom-min-height: 32px;
  --axiom-feature-card-mobile-icon-size: 40px;
  --axiom-feature-card-mobile-icon-font-size: 18px;

  // Dialog
  --axiom-dialog-bg: var(--bg-color-soft);
  --axiom-dialog-border: 1px solid var(--border-color);

  // Feature List Item
  --axiom-feature-list-item-padding: 16px;
  --axiom-feature-list-item-margin-bottom: 12px;
  --axiom-feature-list-item-bg: var(--bg-color-secondary);
  --axiom-feature-list-item-hover-transform: translateY(-2px);
  --axiom-feature-list-item-hover-shadow: var(--box-shadow-lifted);
  --axiom-feature-list-item-pulse-height: 4px;
  --axiom-feature-list-item-pulse-bg: linear-gradient(90deg, transparent, var(--primary-color), var(--success-color), var(--primary-color), transparent);
  --axiom-feature-list-item-icon-size: 20px;
  --axiom-feature-list-item-icon-color: var(--primary-color);
  --axiom-feature-list-item-icon-margin-right: 16px;
  --axiom-feature-list-item-icon-width: 30px;
  --axiom-feature-list-item-title-size: 1rem;
  --axiom-feature-list-item-title-weight: 600;
  --axiom-feature-list-item-title-color: var(--text-color);
  --axiom-feature-list-item-desc-size: 0.85rem;
  --axiom-feature-list-item-desc-color: var(--text-color-secondary);
  --axiom-feature-list-item-desc-margin-top: 4px;
  --axiom-feature-list-item-action-size: 14px;
  --axiom-feature-list-item-action-color: var(--text-color-secondary);

  // Notification
  --axiom-notification-padding: 16px 20px;
  --axiom-notification-gap: 12px;
  --axiom-notification-bg: var(--bg-color-secondary);
  --axiom-notification-border: 1px solid var(--border-color);
  --axiom-notification-border-radius: var(--border-radius-base);
  --axiom-notification-shadow: var(--box-shadow-base);
  --axiom-notification-min-width: 300px;
  --axiom-notification-max-width: 400px;
  --axiom-notification-hover-transform: translateY(-2px);
  --axiom-notification-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  --axiom-notification-icon-size: 24px;
  --axiom-notification-icon-font-size: 18px;
  --axiom-notification-title-size: 16px;
  --axiom-notification-title-weight: 600;
  --axiom-notification-title-margin-bottom: 4px;
  --axiom-notification-message-size: 14px;
  --axiom-notification-close-button-size: 20px;
  --axiom-notification-close-button-font-size: 12px;
  --axiom-notification-close-button-top: 12px;
  --axiom-notification-close-button-right: 12px;
  --axiom-notification-close-button-color: var(--text-color-light);
  --axiom-notification-close-button-hover-bg: var(--danger-color);
  --axiom-notification-close-button-hover-color: var(--text-color-on-primary);
  --axiom-notification-type-border-width: 4px;

  // Number
  --axiom-number-gap: 4px;
  --axiom-number-label-font-size: 12px;
  --axiom-number-label-weight: 500;
  --axiom-number-label-color: var(--text-color-secondary);
  --axiom-number-label-letter-spacing: 0.5px;
  --axiom-number-main-gap: 4px;
  --axiom-number-prefix-font-size: 0.8em;
  --axiom-number-prefix-color: var(--text-color-secondary);
  --axiom-number-value-font-size: 24px;
  --axiom-number-value-font-weight: 700;
  --axiom-number-value-color: var(--text-color);
  --axiom-number-suffix-font-size: 0.8em;
  --axiom-number-suffix-color: var(--text-color-secondary);
  --axiom-number-trend-gap: 2px;
  --axiom-number-trend-margin-left: 8px;
  --axiom-number-trend-icon-size: 12px;
  --axiom-number-trend-value-font-size: 12px;
  --axiom-number-trend-value-font-weight: 600;
  --axiom-number-description-font-size: 12px;
  --axiom-number-description-color: var(--text-color-secondary);
  --axiom-number-description-margin-top: 2px;
  --axiom-number-extra-margin-top: 8px;
  // Sizes
  --axiom-number-sm-label-font-size: 10px;
  --axiom-number-sm-value-font-size: 18px;
  --axiom-number-sm-prefix-suffix-font-size: 0.7em;
  --axiom-number-sm-trend-icon-size: 10px;
  --axiom-number-sm-trend-value-font-size: 10px;
  --axiom-number-sm-description-font-size: 10px;
  --axiom-number-lg-label-font-size: 14px;
  --axiom-number-lg-value-font-size: 32px;
  --axiom-number-lg-prefix-suffix-font-size: 0.9em;
  --axiom-number-lg-trend-icon-size: 16px;
  --axiom-number-lg-trend-value-font-size: 14px;
  --axiom-number-lg-description-font-size: 14px;
  // Card variant
  --axiom-number-card-padding: 16px;
  --axiom-number-card-bg: var(--bg-color-secondary);
  --axiom-number-card-border: 1px solid var(--border-color);
  --axiom-number-card-radius: var(--border-radius-base);
  --axiom-number-card-shadow: var(--box-shadow-base);
  --axiom-number-card-hover-border-color: var(--primary-color);
  --axiom-number-card-hover-shadow: var(--primary-glow);
  // Responsive
  --axiom-number-responsive-lg-value-font-size: 28px;
  --axiom-number-responsive-default-value-font-size: 20px;
  --axiom-number-responsive-card-padding: 12px;

  // Progress
  --axiom-progress-gap: 8px;
  --axiom-progress-label-font-size: 14px;
  --axiom-progress-label-weight: 500;
  --axiom-progress-label-color: var(--text-color);
  // Linear
  --axiom-progress-line-gap: 12px;
  --axiom-progress-track-bg: var(--border-color);
  --axiom-progress-track-radius: calc(var(--border-radius-base) / 2);
  --axiom-progress-text-font-size: 14px;
  --axiom-progress-text-color: var(--text-color);
  --axiom-progress-text-weight: 500;
  --axiom-progress-text-inside-font-size: 12px;
  --axiom-progress-text-inside-color: var(--text-color-on-primary);
  --axiom-progress-text-inside-weight: 600;
  --axiom-progress-text-inside-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --axiom-progress-stripes-size: 20px;
  --axiom-progress-stripes-bg: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  // Circular & Dashboard
  --axiom-progress-circle-text-font-size: 14px;
  --axiom-progress-circle-text-color: var(--text-color);
  --axiom-progress-circle-text-weight: 600;
  // Sizes
  --axiom-progress-sm-track-height: 4px;
  --axiom-progress-sm-text-font-size: 12px;
  --axiom-progress-sm-text-inside-font-size: 10px;
  --axiom-progress-lg-track-height: 12px;
  --axiom-progress-lg-text-font-size: 16px;
  --axiom-progress-lg-text-inside-font-size: 14px;

  // Slider
  --axiom-slider-button-size: 20px;
  --axiom-slider-button-hover-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.2);

  // Select
  --axiom-select-gap: 6px;
  --axiom-select-label-font-size: 14px;
  --axiom-select-label-weight: 500;
  --axiom-select-required-margin-left: 2px;
  --axiom-select-field-padding: 8px 12px;
  --axiom-select-multiple-min-height: 40px;
  --axiom-select-multiple-padding: 4px 8px;
  --axiom-select-tag-bg: var(--primary-color-light);
  --axiom-select-tag-border-color: var(--primary-color);
  --axiom-select-tag-color: var(--primary-color);
  --axiom-select-tag-radius: calc(var(--border-radius-base) / 2);
  --axiom-select-tag-font-size: 12px;
  --axiom-select-tag-close-hover-bg: var(--primary-color);
  --axiom-select-tag-close-hover-color: var(--text-color-on-primary);
  --axiom-select-error-font-size: 12px;
  --axiom-select-error-margin-top: 2px;
  --axiom-select-help-font-size: 12px;
  --axiom-select-help-margin-top: 2px;
  // Dropdown
  --axiom-select-dropdown-item-padding: 8px 12px;
  --axiom-select-dropdown-item-hover-bg: var(--primary-color-light);
  --axiom-select-dropdown-item-hover-color: var(--primary-color);
  --axiom-select-dropdown-item-selected-bg: var(--primary-color);
  --axiom-select-dropdown-item-selected-color: var(--text-color-on-primary);
  --axiom-select-dropdown-item-selected-weight: 500;
  --axiom-select-dropdown-empty-padding: 16px;

  // Tab
  --axiom-tab-nav-radius: 8px 8px 0 0;
  --axiom-tab-content-radius: 0 0 8px 8px;
  --axiom-tab-item-padding: 12px 16px;
  --axiom-tab-item-active-border-height: 2px;
  --axiom-tab-item-mobile-padding: 10px 12px;
  --axiom-tab-item-mobile-font-size: 14px;

  // Tag
  --axiom-tag-radius: 20px;
  --axiom-tag-font-size: 14px;
  --axiom-tag-font-weight: 500;
  --axiom-tag-line-height: 1.2;
  --axiom-tag-border-width: 2px;
  --axiom-tag-padding: 8px 16px;
  --axiom-tag-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --axiom-tag-backdrop-filter: blur(10px);
  --axiom-tag-content-gap: 8px;
  // Close button
  --axiom-tag-close-btn-size: 20px;
  --axiom-tag-close-btn-bg: rgba(255, 255, 255, 0.2);
  --axiom-tag-close-btn-bg-hover: rgba(255, 255, 255, 0.3);
  --axiom-tag-close-btn-margin-left: 6px;
  --axiom-tag-close-icon-size: 12px;
  --axiom-tag-close-icon-hover-transform: rotate(90deg);
  --axiom-tag-close-btn-hover-transform: scale(1.1);
  --axiom-tag-close-btn-active-transform: scale(0.95);
  // Sizes
  --axiom-tag-sm-padding: 4px 12px;
  --axiom-tag-sm-font-size: 12px;
  --axiom-tag-sm-radius: 16px;
  --axiom-tag-sm-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --axiom-tag-sm-close-btn-size: 16px;
  --axiom-tag-sm-close-btn-margin-left: 4px;
  --axiom-tag-sm-close-icon-size: 10px;
  --axiom-tag-lg-padding: 12px 20px;
  --axiom-tag-lg-font-size: 16px;
  --axiom-tag-lg-radius: 24px;
  --axiom-tag-lg-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  --axiom-tag-lg-close-btn-size: 24px;
  --axiom-tag-lg-close-btn-margin-left: 8px;
  --axiom-tag-lg-close-icon-size: 14px;
  // Variants
  --axiom-tag-outline-close-btn-bg: rgba(0, 0, 0, 0.1);
  --axiom-tag-outline-close-btn-bg-hover: rgba(0, 0, 0, 0.2);
  --axiom-tag-soft-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --axiom-tag-default-bg: linear-gradient(135deg, var(--bg-color-secondary), var(--bg-color-tertiary));
  --axiom-tag-default-color: var(--text-color);
  --axiom-tag-default-border-color: var(--border-color);

  // Text
  --axiom-text-line-height: 1.6;
  --axiom-text-size-default: 1rem;
  --axiom-text-size-sm: 0.875rem;
  --axiom-text-size-md: 1rem;
  --axiom-text-size-lg: 1.125rem;
  --axiom-text-size-xl: 1.25rem;
  --axiom-text-weight-light: 300;
  --axiom-text-weight-normal: 400;
  --axiom-text-weight-medium: 500;
  --axiom-text-weight-bold: 600;
  --axiom-text-weight-xbold: 700;
  --axiom-text-muted-opacity: 0.7;

  // Title
  --axiom-title-margin-bottom: 16px;
  --axiom-title-main-margin-bottom: 8px;
  --axiom-title-desc-font-size: 0.9rem;
  --axiom-title-desc-line-height: 1.6;
  --axiom-title-desc-margin-top: 8px;
  // Page Title
  --axiom-title-page-font-size: 2.5rem;
  --axiom-title-page-font-weight: 700;
  --axiom-title-page-color: var(--primary-color);
  --axiom-title-page-margin-bottom: 10px;
  // Section Title
  --axiom-title-section-font-size: 1.8rem;
  --axiom-title-section-font-weight: 600;
  --axiom-title-section-margin-top: 40px;
  --axiom-title-section-margin-bottom: 20px;
  // Component Title
  --axiom-title-component-font-size: 1.5rem;
  --axiom-title-component-font-weight: 600;
  // Card Title
  --axiom-title-card-font-size: 1.2rem;
  --axiom-title-card-font-weight: 600;

  // Input
  --axiom-input-gap: 6px;
  --axiom-input-label-font-size: 14px;
  --axiom-input-label-weight: 500;
  --axiom-input-required-margin-left: 2px;
  --axiom-input-field-padding: 8px 12px;
  --axiom-input-field-font-size: 14px;
  --axiom-input-focus-shadow: 0 0 0 2px var(--primary-color-light);
  --axiom-input-error-focus-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
  --axiom-input-lg-padding: 12px 16px;
  --axiom-input-lg-font-size: 16px;
  --axiom-input-sm-padding: 6px 8px;
  --axiom-input-sm-font-size: 12px;
  --axiom-input-error-font-size: 12px;
  --axiom-input-error-margin-top: 2px;
  --axiom-input-help-font-size: 12px;
  --axiom-input-help-margin-top: 2px;
  --axiom-input-prepend-append-bg: var(--bg-color);
  --axiom-input-prepend-append-color: var(--text-color-secondary);
  --axiom-textarea-padding: 8px 12px;
  --axiom-textarea-font-size: 14px;

  // Link
  --axiom-link-gap: 4px;
  --axiom-link-external-icon-font-size: 0.8em;
  --axiom-link-external-icon-opacity: 0.7;
  --axiom-link-default-hover-color: var(--primary-color);
  --axiom-link-secondary-hover-color: var(--text-color);
  --axiom-link-sm-font-size: 0.875rem;
  --axiom-link-md-font-size: 1rem;
  --axiom-link-lg-font-size: 1.125rem;
  --axiom-link-button-padding: 8px 16px;
  --axiom-link-button-hover-color: var(--bg-color);
  --axiom-link-disabled-opacity: 0.5;

  // Loading
  --axiom-loading-gap: 12px;
  --axiom-loading-overlay-bg: rgba(0, 0, 0, 0.3);
  --axiom-loading-overlay-blur: 2px;
  --axiom-loading-z-index: 9999;
  --axiom-loading-icon-width: 32px;
  --axiom-loading-icon-height: 32px;
  --axiom-loading-icon-font-size: 18px;
  --axiom-loading-text-font-size: 14px;
  // Sizes
  --axiom-loading-sm-icon-width: 20px;
  --axiom-loading-sm-icon-height: 20px;
  --axiom-loading-sm-icon-font-size: 14px;
  --axiom-loading-sm-text-font-size: 12px;
  --axiom-loading-lg-icon-width: 48px;
  --axiom-loading-lg-icon-height: 48px;
  --axiom-loading-lg-icon-font-size: 24px;
  --axiom-loading-lg-text-font-size: 16px;
  // Dots
  --axiom-loading-dots-gap: 4px;
  --axiom-loading-dots-size: 6px;
  // Pulse
  --axiom-loading-pulse-gap: 3px;
  --axiom-loading-pulse-width: 4px;
  --axiom-loading-pulse-height: 20px;
  --axiom-loading-pulse-radius: 2px;
  // Bars
  --axiom-loading-bars-gap: 2px;
  --axiom-loading-bars-width: 3px;
  --axiom-loading-bars-height: 16px;
  --axiom-loading-bars-radius: 1px;

  // Main Layout
  --axiom-main-layout-transition: all 0.5s ease;
  // Header
  --axiom-header-pc-padding: 0 32px;
  --axiom-header-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --axiom-header-top-bar-height: 2px;
  --axiom-header-top-bar-bg: linear-gradient(90deg, var(--primary-color), var(--success-color));
  --axiom-header-top-bar-opacity: 0.8;
  --axiom-header-mobile-padding: 0 16px;
  --axiom-header-mobile-action-gap: 8px;
  // Mobile Filter
  --axiom-header-mobile-filter-padding: 12px 16px;
  --axiom-header-mobile-filter-gap: 12px;
  --axiom-header-mobile-search-radius: 20px;
  --axiom-header-mobile-search-padding: 10px 14px;
  --axiom-header-mobile-search-transition: all 0.3s ease;
  --axiom-header-mobile-search-focus-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 24, 144, 255), 0.1);
  --axiom-header-mobile-search-icon-margin-right: 8px;
  --axiom-header-mobile-search-input-font-size: 14px;
  --axiom-header-mobile-clear-icon-size: 18px;
  --axiom-header-mobile-clear-icon-margin-left: 8px;
  --axiom-header-mobile-clear-icon-transition: all 0.2s ease;
  --axiom-header-mobile-active-filter-top: calc(var(--mobile-header-height) + 60px);
  --axiom-header-mobile-active-filter-padding: 12px 16px;
  --axiom-header-mobile-active-filter-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  // Breadcrumb
  --axiom-breadcrumb-gap: 8px;
  --axiom-breadcrumb-item-gap: 8px;
  --axiom-breadcrumb-link-hover-color: var(--primary-color);
  --axiom-breadcrumb-current-page-weight: 500;
  // User Info
  --axiom-user-info-gap: 8px;
  --axiom-user-info-padding: 8px 16px;
  --axiom-user-info-radius: 20px;
  --axiom-user-info-transition: all 0.3s ease;
  --axiom-user-info-hover-bg: var(--primary-color-light);
  --axiom-user-info-hover-border-color: var(--primary-color);
  --axiom-user-info-hover-color: var(--text-color);
  --axiom-user-info-icon-font-size: 16px;
  // Sidebar
  --axiom-sidebar-transition: all 0.3s ease;
  --axiom-sidebar-logo-icon-font-size: 24px;
  --axiom-sidebar-logo-text-margin-left: 12px;
  --axiom-sidebar-logo-text-font-size: 20px;
  --axiom-sidebar-logo-text-font-weight: 700;
  --axiom-sidebar-menu-padding: 16px 0;
  --axiom-sidebar-menu-item-padding: 12px 24px;
  --axiom-sidebar-menu-item-transition: all 0.3s ease;
  --axiom-sidebar-menu-item-gap: 12px;
  --axiom-sidebar-menu-item-icon-font-size: 18px;
  --axiom-sidebar-menu-item-icon-width: 18px;
  --axiom-sidebar-menu-item-hover-bg: var(--primary-color-light);
  --axiom-sidebar-menu-item-hover-color: var(--text-color);
  --axiom-sidebar-menu-item-active-weight: 600;
  --axiom-sidebar-menu-item-active-bg: var(--primary-color-light);
  --axiom-sidebar-menu-item-active-shadow: inset 3px 0 0 0 var(--primary-color);
  // Content
  --axiom-content-pc-transition: margin-left 0.3s ease;
  --axiom-content-mobile-bottom-padding: var(--mobile-header-height);
  --axiom-content-mobile-bottom-nav-padding: calc(var(--mobile-header-height) + 20px);
  // Bottom Nav
  --axiom-bottom-nav-padding: 0 10px;
  --axiom-bottom-nav-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  --axiom-bottom-nav-item-transition: color 0.3s ease;
  --axiom-bottom-nav-item-icon-font-size: 20px;
  --axiom-bottom-nav-item-icon-margin-bottom: 4px;
  // Animation
  --axiom-animation-fade-enter-duration: 0.3s;
  --axiom-animation-fade-leave-duration: 0.15s;

  // Theme Switch
  --axiom-theme-switch-toggle-hover-color: var(--primary-color);
  --axiom-theme-switch-menu-margin-top: 8px;
  --axiom-theme-switch-menu-min-width: 240px;
  --axiom-theme-switch-menu-padding: 12px;
  --axiom-theme-switch-menu-animation: slideDown 0.2s ease-out;
  --axiom-theme-switch-menu-backdrop-filter: blur(10px);
  --axiom-theme-switch-header-padding: 8px 12px;
  --axiom-theme-switch-header-margin-bottom: 8px;
  --axiom-theme-switch-options-gap: 8px;
  --axiom-theme-switch-options-max-height: 300px;
  --axiom-theme-switch-option-padding: 12px 8px;
  --axiom-theme-switch-option-border-width: 2px;
  --axiom-theme-switch-option-hover-bg: var(--bg-color-secondary);
  --axiom-theme-switch-option-hover-border-color: var(--border-color);
  --axiom-theme-switch-option-active-bg: var(--primary-color-light);
  --axiom-theme-switch-option-active-border-color: var(--primary-color);
  --axiom-theme-switch-option-active-text-color: var(--primary-color);
  --axiom-theme-switch-option-active-text-weight: 600;
  --axiom-theme-switch-preview-gap: 2px;
  --axiom-theme-switch-preview-margin-bottom: 8px;
  --axiom-theme-switch-preview-radius: 4px;
  --axiom-theme-switch-preview-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --axiom-theme-switch-preview-color-width: 16px;
  --axiom-theme-switch-preview-color-height: 16px;
  --axiom-theme-switch-overlay-z-index: 999;
  // Responsive
  --axiom-theme-switch-mobile-max-width: 90vw;
  --axiom-theme-switch-mobile-max-height: 70vh;
  --axiom-theme-switch-mobile-options-columns: 3;
  --axiom-theme-switch-mobile-option-padding: 8px 6px;
  --axiom-theme-switch-mobile-preview-color-size: 12px;

  // Time Picker
  --axiom-time-picker-gap: 6px;
  --axiom-time-picker-label-font-size: 14px;
  --axiom-time-picker-label-weight: 500;
  --axiom-time-picker-required-margin-left: 2px;
  --axiom-time-picker-icon-font-size: 16px;
  // Sizes
  --axiom-time-picker-lg-padding: 12px 16px;
  --axiom-time-picker-lg-font-size: 16px;
  --axiom-time-picker-sm-padding: 6px 8px;
  --axiom-time-picker-sm-font-size: 12px;
  // Error & Help
  --axiom-time-picker-error-font-size: 12px;
  --axiom-time-picker-error-margin-top: 2px;
  --axiom-time-picker-help-font-size: 12px;
  --axiom-time-picker-help-margin-top: 2px;
  // Panel
  --axiom-time-panel-bg: var(--bg-color-secondary);
  --axiom-time-panel-border: 1px solid var(--border-color);
  --axiom-time-panel-radius: var(--border-radius-base);
  --axiom-time-panel-shadow: var(--box-shadow-base);
  --axiom-time-panel-backdrop-filter: var(--backdrop-blur);
  // Spinner
  --axiom-time-spinner-item-hover-bg: var(--primary-color-light);
  --axiom-time-spinner-item-hover-color: var(--primary-color);
  --axiom-time-spinner-item-active-bg: var(--primary-color);
  --axiom-time-spinner-item-active-color: var(--text-color-on-primary);
  --axiom-time-spinner-item-active-weight: 600;
  --axiom-time-spinner-divider-color: var(--border-color);
  // Footer
  --axiom-time-footer-border-top: 1px solid var(--border-color);
  --axiom-time-footer-bg: var(--bg-color);
  --axiom-time-footer-btn-hover-border-color: var(--primary-color);
  --axiom-time-footer-btn-hover-color: var(--primary-color);
  --axiom-time-footer-btn-primary-hover-opacity: 0.8;
  // Arrow Control
  --axiom-time-arrow-control-hover-color: var(--primary-color);
  --axiom-time-arrow-up-border-bottom: 1px solid var(--border-color);
  --axiom-time-arrow-down-border-top: 1px solid var(--border-color);
  // Responsive
  --axiom-time-panel-mobile-max-width: 280px;
  --axiom-time-spinner-mobile-item-padding: 8px 4px;
  --axiom-time-spinner-mobile-item-font-size: 12px;

  // Toast
  --axiom-toast-container-z-index: 9999;
  --axiom-toast-container-offset: 20px;
  --axiom-toast-gap: 12px;
  --axiom-toast-padding: 16px;
  --axiom-toast-min-width: 300px;
  --axiom-toast-max-width: 400px;
  --axiom-toast-margin-bottom: 12px;
  --axiom-toast-backdrop-filter: var(--backdrop-blur);
  --axiom-toast-hover-shadow: var(--box-shadow-hover, var(--box-shadow-base));
  --axiom-toast-hover-transform: translateY(-2px);
  --axiom-toast-type-border-width: 4px;
  --axiom-toast-closable-padding-right: 48px;
  --axiom-toast-icon-size: 20px;
  --axiom-toast-icon-margin-top: 2px;
  --axiom-toast-title-font-size: 14px;
  --axiom-toast-title-weight: 600;
  --axiom-toast-title-margin-bottom: 4px;
  --axiom-toast-message-font-size: 13px;
  --axiom-toast-message-line-height: 1.5;
  --axiom-toast-close-btn-top: 12px;
  --axiom-toast-close-btn-right: 12px;
  --axiom-toast-close-btn-size: 20px;
  --axiom-toast-close-btn-hover-bg: var(--border-color);
  --axiom-toast-close-btn-hover-color: var(--text-color);
  --axiom-toast-close-icon-size: 12px;
  --axiom-toast-progress-height: 3px;
  --axiom-toast-progress-bg: linear-gradient(90deg, var(--primary-color), var(--primary-color-light));
  // Responsive
  --axiom-toast-mobile-offset: 10px;
  --axiom-toast-mobile-enter-transform: translateY(-20px);

  // Back To Top
  --axiom-back-to-top-bottom: 80px;
  --axiom-back-to-top-right: 20px;
  --axiom-back-to-top-width: 50px;
  --axiom-back-to-top-height: 50px;
  --axiom-back-to-top-hover-transform: translateY(-2px);
  --axiom-back-to-top-active-transform: translateY(0);
  --axiom-back-to-top-svg-hover-transform: translateY(-1px);
  --axiom-back-to-top-fade-transform: scale(0.8) translateY(10px);
  // Responsive
  --axiom-back-to-top-mobile-size: 45px;
  --axiom-back-to-top-mobile-bottom: 90px;
  --axiom-back-to-top-mobile-right: 16px;
  --axiom-back-to-top-mobile-svg-size: 18px;
  --axiom-back-to-top-sm-size: 40px;
  --axiom-back-to-top-sm-svg-size: 16px;

  // Blockquote
  --axiom-blockquote-border-width: 4px;
  --axiom-blockquote-padding: var(--axiom-spacing-lg) 20px;
  --axiom-blockquote-margin: 20px 0;
  --axiom-blockquote-author-margin-top: var(--axiom-spacing-md);
  --axiom-blockquote-author-font-size: 0.9em;

  // Button
  --axiom-button-font-weight: 600;
  --axiom-button-border-width: 1px;
  --axiom-button-filled-primary-hover-bg: var(--primary-color-dark, var(--axiom-primary-color));
  --axiom-button-padding-y-sm: 8px;
  --axiom-button-padding-x-md: 16px;
  --axiom-button-border-radius-pill: 20px;

  // Card
  --axiom-card-border-width: 1px;
  --axiom-card-hover-border-color: var(--primary-color);
  --axiom-card-hover-shadow: var(--primary-glow, var(--axiom-box-shadow-primary));
  --axiom-card-margin-lg: var(--axiom-spacing-lg);
  --axiom-card-margin-md: var(--axiom-spacing-md);
  // Top & Bottom
  --axiom-card-top-bottom-padding: var(--axiom-spacing-md) var(--axiom-spacing-lg);
  --axiom-card-top-bottom-min-height: 48px;
  --axiom-card-top-left-right-max-width: 25%;
  --axiom-card-center-padding: 0 var(--axiom-spacing-sm);
  // Header
  --axiom-card-title-font-size: 1.2rem;
  --axiom-card-title-font-weight: 600;
  --axiom-card-title-font-family: var(--font-family-special, var(--axiom-font-family-base));
  --axiom-card-subtitle-font-size: 0.9rem;
  --axiom-card-subtitle-margin-top: var(--axiom-spacing-xs);
  // Content
  --axiom-card-body-padding: 20px;
  --axiom-card-extra-padding: var(--axiom-spacing-md) 20px;
  --axiom-card-extra-border-top: 1px solid var(--axiom-border-color-light);
  --axiom-card-extra-bg: rgba(var(--axiom-bg-color-tertiary, var(--axiom-bg-color-secondary)), 0.5);
  // Responsive
  --axiom-card-mobile-top-bottom-padding: 10px var(--axiom-spacing-md);
  --axiom-card-mobile-top-bottom-min-height: 40px;
  --axiom-card-mobile-top-left-right-max-width: 20%;
  --axiom-card-mobile-title-font-size: 1.1rem;
  --axiom-card-mobile-subtitle-font-size: 0.8rem;
  --axiom-card-mobile-body-padding: var(--axiom-spacing-md);
  // Small Screen
  --axiom-card-sm-top-bottom-padding: var(--axiom-spacing-sm) 10px;
  --axiom-card-sm-top-bottom-min-height: 36px;
  --axiom-card-sm-top-left-right-max-width: 15%;
  --axiom-card-sm-body-padding: var(--axiom-spacing-sm);
  // Compact
  --axiom-card-compact-mobile-margin-bottom: var(--axiom-spacing-md);
  --axiom-card-compact-mobile-body-padding: var(--axiom-spacing-sm) var(--axiom-spacing-md);
  --axiom-card-compact-sm-margin-bottom: var(--axiom-spacing-sm);
  --axiom-card-compact-sm-body-padding: 6px 10px;

  // Chart
  --axiom-chart-min-height: 300px;
  --axiom-chart-loading-error-min-height: 300px;
  // Responsive
  --axiom-chart-mobile-min-height: 250px;
  --axiom-chart-mobile-canvas-max-height: 250px;

  // Code
  --axiom-code-inline-font-size: 0.875em;
  --axiom-code-inline-padding: 2px var(--axiom-spacing-sm);
  --axiom-code-block-font-size: 0.875rem;
  --axiom-code-block-padding: var(--axiom-spacing-lg);
  --axiom-code-block-line-height: 1.5;
  --axiom-code-block-margin: var(--axiom-spacing-lg) 0;
  --axiom-code-copyable-icon-top: var(--axiom-spacing-sm);
  --axiom-code-copyable-icon-right: var(--axiom-spacing-sm);
  --axiom-code-copyable-icon-opacity: 0.6;
  --axiom-code-copyable-icon-hover-opacity: 1;
  --axiom-code-line-number-margin-right: var(--axiom-spacing-lg);

  // Advanced Filter
  --axiom-advanced-filter-overlay-bg: rgba(0, 0, 0, 0.5);
  --axiom-advanced-filter-overlay-blur: 8px;
  --axiom-advanced-filter-z-index: 9999;
  // Sidebar
  --axiom-advanced-filter-sidebar-width: 320px;
  --axiom-advanced-filter-sidebar-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  --axiom-advanced-filter-sidebar-top: var(--expected-header-height, 60px);
  --axiom-advanced-filter-sidebar-z-index: 10000;
  // Scroll Area
  --axiom-advanced-filter-scroll-padding: 16px;
  --axiom-advanced-filter-grid-gap: 12px;
  // Filter Item
  --axiom-advanced-filter-item-padding: 16px 12px;
  --axiom-advanced-filter-item-bg: var(--bg-color-tertiary);
  --axiom-advanced-filter-item-radius: 8px;
  --axiom-advanced-filter-item-transition: all 0.2s ease;
  --axiom-advanced-filter-item-hover-bg: var(--bg-color-secondary);
  --axiom-advanced-filter-item-hover-border-color: var(--border-color-emphasis, var(--border-color));
  --axiom-advanced-filter-item-hover-transform: translateY(-1px);
  --axiom-advanced-filter-item-active-bg: var(--primary-color-light);
  --axiom-advanced-filter-item-active-transform: translateY(0);
  // Actions
  --axiom-advanced-filter-actions-z-index: 10001;
  --axiom-advanced-filter-actions-gap: 12px;
  --axiom-advanced-filter-actions-padding: 16px;
  --axiom-advanced-filter-actions-border-top: 1px solid var(--border-color);
  --axiom-advanced-filter-actions-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
  // Action Buttons
  --axiom-advanced-filter-btn-height: 44px;
  --axiom-advanced-filter-btn-radius: 8px;
  --axiom-advanced-filter-btn-font-size: 14px;
  --axiom-advanced-filter-btn-font-weight: 500;
  --axiom-advanced-filter-btn-transition: all 0.2s ease;
  --axiom-advanced-filter-reset-btn-min-width: 80px;
  --axiom-advanced-filter-reset-btn-color: var(--text-color-light);
  --axiom-advanced-filter-reset-btn-border: 1px solid var(--border-color);
  --axiom-advanced-filter-reset-btn-hover-bg: var(--bg-color-tertiary);
  --axiom-advanced-filter-reset-btn-hover-color: var(--text-color);
  --axiom-advanced-filter-reset-btn-hover-border-color: var(--border-color-emphasis, var(--border-color));
  --axiom-advanced-filter-confirm-btn-color: white;
  --axiom-advanced-filter-confirm-btn-border: 1px solid var(--primary-color);
  --axiom-advanced-filter-confirm-btn-font-weight: 600;
  --axiom-advanced-filter-confirm-btn-hover-bg: var(--primary-color-dark, var(--primary-color));
  --axiom-advanced-filter-confirm-btn-hover-transform: translateY(-1px);
  --axiom-advanced-filter-confirm-btn-hover-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 147, 51, 234), 0.3);
  --axiom-advanced-filter-confirm-btn-active-transform: translateY(0);
  // Responsive
  --axiom-advanced-filter-mobile-sidebar-width: 280px;
  --axiom-advanced-filter-mobile-sidebar-top: var(--expected-header-height, 50px);
  --axiom-advanced-filter-mobile-scroll-padding: 12px;
  --axiom-advanced-filter-mobile-actions-padding: 12px;
  --axiom-advanced-filter-mobile-actions-gap: 8px;
  --axiom-advanced-filter-sm-sidebar-width: 100%;
  --axiom-advanced-filter-sm-sidebar-top: var(--expected-header-height, 50px);
  --axiom-advanced-filter-sm-scroll-padding: 16px 12px;
  --axiom-advanced-filter-sm-item-padding: 18px 12px;
  --axiom-advanced-filter-sm-actions-padding: 16px 12px;
  --axiom-advanced-filter-sm-btn-height: 48px;

  // Base Sheet
  --axiom-base-sheet-bg-color: var(--bg-color);
  --axiom-base-sheet-backdrop-filter: blur(var(--backdrop-blur, 20px));
  --axiom-base-sheet-border-radius: 28px;
  --axiom-base-sheet-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 -4px 16px rgba(0, 0, 0, 0.08), 0 -2px 8px rgba(0, 0, 0, 0.04);
  --axiom-base-sheet-border-color: var(--border-color);
  --axiom-base-sheet-handle-color: var(--text-color-light);
  // Header
  --axiom-base-sheet-header-padding: 32px 24px 24px;
  --axiom-base-sheet-header-border-color: var(--border-color);
  --axiom-base-sheet-header-bg-color: var(--bg-color-secondary);
  --axiom-base-sheet-header-backdrop-filter: blur(var(--backdrop-blur, 10px));
  --axiom-base-sheet-title-font-size: 18px;
  --axiom-base-sheet-title-font-weight: 600;
  --axiom-base-sheet-title-color: var(--text-color);
  // Search
  --axiom-base-sheet-search-padding: 0 24px 16px;
  --axiom-base-sheet-search-border-color: var(--border-color);
  --axiom-base-sheet-search-input-border-radius: 12px;
  --axiom-base-sheet-search-input-border-color: var(--border-color);
  --axiom-base-sheet-search-input-bg-color: var(--bg-color-tertiary);
  --axiom-base-sheet-search-input-text-color: var(--text-color);
  --axiom-base-sheet-search-input-focus-border-color: var(--primary-color);
  --axiom-base-sheet-search-input-focus-bg-color: var(--bg-color);
  --axiom-base-sheet-search-input-focus-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
  --axiom-base-sheet-search-input-placeholder-color: var(--text-color-light);
  --axiom-base-sheet-search-input-prefix-color: var(--text-color-light);
  // Quick Options
  --axiom-base-sheet-quick-options-gap: 8px;
  --axiom-base-sheet-quick-options-margin-bottom: 20px;
  --axiom-base-sheet-quick-option-padding: 8px 16px;
  --axiom-base-sheet-quick-option-border-color: var(--border-color);
  --axiom-base-sheet-quick-option-bg-color: var(--bg-color-tertiary);
  --axiom-base-sheet-quick-option-text-color: var(--text-color);
  --axiom-base-sheet-quick-option-font-size: 14px;
  --axiom-base-sheet-quick-option-radius: 20px;
  --axiom-base-sheet-quick-option-hover-border-color: var(--primary-color);
  --axiom-base-sheet-quick-option-hover-bg-color: rgba(var(--primary-color-rgb), 0.05);
  --axiom-base-sheet-quick-option-active-border-color: var(--primary-color);
  --axiom-base-sheet-quick-option-active-bg-color: var(--primary-color);
  --axiom-base-sheet-quick-option-active-text-color: white;
  --axiom-base-sheet-quick-option-active-weight: 500;
  // Content
  --axiom-base-sheet-content-padding: 20px 24px;
  --axiom-base-sheet-content-border-radius: 12px;
  // Selected Section
  --axiom-base-sheet-selected-padding: 16px 24px;
  --axiom-base-sheet-selected-bg-color: var(--bg-color-secondary);
  --axiom-base-sheet-selected-border-color: var(--border-color);
  --axiom-base-sheet-selected-title-color: var(--primary-color);
  --axiom-base-sheet-selected-tag-bg-color: var(--primary-color);
  --axiom-base-sheet-selected-tag-border-color: var(--primary-color);
  --axiom-base-sheet-selected-tag-text-color: var(--text-color-on-primary);
  --axiom-base-sheet-selected-tag-close-color: rgba(255, 255, 255, 0.8);
  --axiom-base-sheet-selected-tag-close-hover-color: white;
  --axiom-base-sheet-selected-tag-close-hover-bg-color: rgba(255, 255, 255, 0.2);
  // Date Input
  --axiom-base-sheet-date-input-label-color: var(--text-color-light);
  --axiom-base-sheet-date-input-border-color: var(--border-color);
  --axiom-base-sheet-date-input-bg-color: var(--bg-color);
  --axiom-base-sheet-date-input-text-color: var(--text-color);
  --axiom-base-sheet-date-input-focus-border-color: var(--primary-color);
  --axiom-base-sheet-date-input-focus-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
  --axiom-base-sheet-date-separator-color: var(--text-color-light);
  // Time Input
  --axiom-base-sheet-time-input-border-color: var(--border-color);
  --axiom-base-sheet-time-input-bg-color: var(--bg-color);
  --axiom-base-sheet-time-input-text-color: var(--text-color);
  // Footer
  --axiom-base-sheet-footer-padding: 16px 24px;
  --axiom-base-sheet-footer-border-top: 1px solid var(--border-color);
  --axiom-base-sheet-footer-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  --axiom-base-sheet-footer-actions-gap: 12px;
  --axiom-base-sheet-footer-btn-height: 48px;
  --axiom-base-sheet-footer-btn-radius: 12px;

  // Bottom Sheet
  --axiom-bottom-sheet-overlay-bg-color: rgba(0, 0, 0, 0);
  --axiom-bottom-sheet-overlay-backdrop-filter: blur(0px);
  --axiom-bottom-sheet-overlay-visible-bg-color: rgba(0, 0, 0, 0.4);
  --axiom-bottom-sheet-overlay-visible-dark-bg-color: rgba(0, 0, 0, 0.6);
  --axiom-bottom-sheet-overlay-visible-backdrop-filter: blur(8px);
  --axiom-bottom-sheet-z-index: 9999;
  --axiom-bottom-sheet-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --axiom-bottom-sheet-container-transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --axiom-bottom-sheet-footer-padding-top: var(--spacing-lg);
  --axiom-bottom-sheet-footer-margin-top: var(--spacing-sm);
  --axiom-bottom-sheet-footer-border-top-color: var(--border-color-light);
  --axiom-bottom-sheet-footer-gap: var(--spacing-md);

  // Number Range Sheet
  --axiom-number-range-sheet-preset-item-min-width: 80px;

  // Multi Select Sheet
  --axiom-multi-select-sheet-item-hover-translate-x: 2px;

  // Mobile List
  --axiom-mobile-list-occupied-height: 140px;
  --axiom-mobile-list-item-min-height: 140px;
  --axiom-mobile-list-header-min-height: 32px;
  --axiom-mobile-list-desc-min-height: 20px;
  --axiom-mobile-list-actions-min-height: 32px;

  // Filter Chip
  --axiom-chip-gap: 8px;
  --axiom-chip-padding-y: 6px;
  --axiom-chip-padding-x: 12px;
  --axiom-chip-border-radius: 18px;
  --axiom-chip-font-size: 14px;
  --axiom-chip-font-weight: 400;
  --axiom-chip-label-max-width: 150px;
  --axiom-chip-icon-size: 12px;

  // Resource View
  --axiom-resource-card-min-height: 200px;
  --axiom-resource-card-hover-translate-y: -4px;
  --axiom-resource-card-desc-min-height: 48px;
  --axiom-resource-card-meta-border-width: 3px;
  --axiom-resource-state-container-padding-y: 48px;

  // Swipe Card
  --axiom-swipe-card-min-height: 120px;
  --axiom-swipe-card-header-min-height: 40px;
  --axiom-swipe-card-footer-min-height: 36px;
  --axiom-swipe-card-actions-width: 120px;
  --axiom-swipe-card-actions-width-mobile: 100px;

  // Time Sheet
  --axiom-time-sheet-panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  --axiom-time-sheet-checkmark-top: 16px;
  --axiom-time-sheet-checkmark-right: 20px;
  --axiom-time-sheet-checkmark-size: 18px;

  // Select Sheet
  --axiom-select-sheet-header-padding: 32px 24px 24px;
  --axiom-select-sheet-title-margin: 0 16px;
  --axiom-select-sheet-close-btn-size: 36px;
  --axiom-select-sheet-close-btn-padding: 8px;
  --axiom-select-sheet-options-list-padding: 16px 24px;
  --axiom-select-sheet-options-list-gap: 6px;
  --axiom-select-sheet-option-item-padding: 16px 20px;
  --axiom-select-sheet-option-item-radius: 12px;
  --axiom-select-sheet-option-item-hover-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(var(--primary-color-rgb), 0.1);
  --axiom-select-sheet-option-item-selected-border-width: 2px;
  --axiom-select-sheet-option-item-selected-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.2), 0 2px 8px rgba(var(--primary-color-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --axiom-select-sheet-checkmark-margin-left: 12px;
  --axiom-select-sheet-footer-padding: 16px 24px;
  --axiom-select-sheet-confirm-btn-max-width: 320px;
  --axiom-select-sheet-confirm-btn-height: 52px;
  --axiom-select-sheet-confirm-btn-radius: 16px;
  --axiom-select-sheet-confirm-btn-font-size: 17px;
  --axiom-select-sheet-confirm-btn-hover-shadow: 0 8px 24px rgba(var(--primary-color-rgb), 0.4), 0 4px 16px rgba(var(--primary-color-rgb), 0.3);
  --axiom-select-sheet-confirm-btn-active-shadow: 0 4px 16px rgba(var(--primary-color-rgb), 0.3), 0 2px 8px rgba(var(--primary-color-rgb), 0.2);

  // --- PC Components ---

  // Data Table
  --axiom-data-table-pagination-margin-top: 1.5rem;

  // Main Layout
  --axiom-pc-sidebar-transition: width 0.3s ease;
  --axiom-pc-header-bg-color-alpha: rgba(255, 255, 255, 0.8);
  --axiom-pc-header-backdrop-filter: blur(8px);
  --axiom-pc-header-z-index: 10;
  --axiom-pc-view-fade-in-animation: fadeIn 0.2s ease-in-out;

  // Sidebar Nav
  --axiom-pc-sidebar-nav-title-weight: 600;
  --axiom-pc-sidebar-nav-item-padding: 12px 20px;
  --axiom-pc-sidebar-nav-item-transition: background-color 0.2s, color 0.2s;
  --axiom-pc-sidebar-nav-item-active-weight: 600;
  --axiom-pc-sidebar-nav-icon-width: 24px;
  --axiom-pc-sidebar-nav-icon-margin-right: 12px;
  --axiom-pc-sidebar-nav-arrow-transition: transform 0.3s ease;
  --axiom-pc-sidebar-nav-arrow-open-transform: rotate(180deg);
  --axiom-pc-sidebar-nav-submenu-padding-left: 24px;
  --axiom-pc-sidebar-nav-submenu-transition: max-height 0.3s ease-in-out;
  --axiom-pc-sidebar-nav-submenu-open-max-height: 500px;
  --axiom-pc-sidebar-nav-submenu-anim-transition: all 0.3s ease-in-out;
  --axiom-pc-sidebar-nav-submenu-anim-opacity-start: 0;
}